<template>
  <dialogPublic
    class="remarksDialog"
    :title="dialogTitle"
    noFootBtn
    :show.sync="showRemarks"
    @doClose="() => (showRemarks = false)"
    width="500px"
  >
    <div class="block">
      <el-timeline class="top" id="mark">
        <el-timeline-item v-for="(item, index) in remarks" :key="index">
          <div class="item">
            <div class="info">
              <el-avatar class="img" size="medium">
                <span class="bg">
                  <div>
                    {{
                      dialogTitle == "抽查"
                        ? item.name
                          ? item.name.substring(item.name.length - 2)
                          : ""
                        : item.createUserName
                        ? item.createUserName.substring(
                            item.createUserName.length - 2
                          )
                        : ""
                    }}
                  </div>
                </span>
              </el-avatar>
              <span class="name">{{
                dialogTitle == "抽查" ? item.name : item.createUserName
              }}</span>
              <span class="time">{{ item.createTime }}</span>
            </div>
            <div class="content" v-show="dialogTitle == '抽查'">
              <span :class="{ checkResults: !item.checkResults }">{{
                item.checkResults ? "合格" : "不合格"
              }}</span
              >{{ item.context ? "，" + item.context : "" }}
            </div>
            <div class="content" v-show="dialogTitle == '备注'">
              {{ item.context }}
            </div>
          </div>
        </el-timeline-item>
      </el-timeline>
      <div v-show="dialogTitle == '抽查'" class="check">
        <template>
          <span>抽查结果：</span>
          <el-radio v-model="checkResults" label="1">合格</el-radio>
          <el-radio class="red-text" v-model="checkResults" label="0"
            >不合格</el-radio
          >
        </template>
      </div>
      <div class="bottom">
        <el-input
          id="markInput"
          ref="mark"
          type="textarea"
          :placeholder="placeholderText"
          v-model="remark"
          rows="4"
          @keyup.enter.native="doRemark"
        >
        </el-input>
        <el-button class="btn-text-blue btn" @click="doRemark">发表</el-button>
      </div>
    </div>
  </dialogPublic>
</template>
<script>
import {
  addCheck,
  getCheckInfo,
} from "@/api/twoTicketManagement/twoTicketCheck.js";
import {
  addRemarks,
  getRemarksList,
} from "@/api/twoTicketManagement/workTicket.js";
export default {
  props: {
    workTicketId: {
      type: String,
      default: () => {
        return "";
      },
    },
    dialogTitle: {
      type: String,
      default: () => {
        return "";
      },
    },
    ticketType: {
      type: String,
      default: () => {
        return "";
      },
    },
  },
  data() {
    return {
      showRemarks: false,
      checkResults: "1", // 抽查结果
      remark: "",
      remarkId: "",
      remarks: [],
      placeholderText: "",
    };
  },
  methods: {
    showDialog() {
      this.remarks = [];
      if (this.dialogTitle == "备注") {
        this.placeholderText = "请输入备注内容（按Enter发表）";
        this.getRemarkList();
      } else {
        this.placeholderText = "请输入抽查意见（按Enter发表）";
        this.getCheckList();
      }
      this.showRemarks = true;
      this.$nextTick(() => {
        this.$refs.mark.focus();
      });
    },
    // 发表备注或抽查（发表按钮或Enter）
    async doRemark() {
      document
        .getElementById("markInput")
        .addEventListener("keydown", function (e) {
          if (e.code == "Enter" || e.keyCode == 13 || e.key == "Enter") {
            e.preventDefault();
            this.remark = "";
          }
        });
      if (this.dialogTitle == "抽查") {
        let data = {
          checkResults: this.checkResults == "1" ? 1 : 0,
          context: this.remark,
          ticketId: this.workTicketId,
          ticketType: this.ticketType || "work",
        };
        await addCheck(data).then((res) => {
          if (res.code == 200) {
            this.$message.success(res.description);
            this.getCheckList();
            this.remark = "";
            this.$refs.mark.focus();
            this.updateListData();
          }
        });
      } else {
        if (
          this.remark != "" &&
          this.remark.trim() != "" &&
          this.remark != "\n"
        ) {
          let data = {
            context: this.remark,
            id: this.remarkId,
            workTicketId: this.workTicketId,
          };
          await addRemarks(data).then((res) => {
            if (res.code == 200) {
              this.$message.success(res.description);
              this.getRemarkList();
              this.remark = "";
              this.$refs.mark.focus();
            }
          });
        } else {
          this.remark = "";
          this.$message.warning("请输入备注内容。");
        }
      }
    },
    // 获取备注信息
    async getRemarkList() {
      await getRemarksList(this.workTicketId).then((res) => {
        if (res.code == 200) {
          this.remarks = res.data;
          if (res.data.length) {
            this.remarkId = this.remarks[this.remarks.length - 1].id;
            this.$nextTick(() => {
              document.getElementById("mark").scrollTop =
                document.getElementById("mark").scrollHeight;
            });
          }
        }
      });
    },
    // 获取抽查信息
    async getCheckList() {
      await getCheckInfo(this.workTicketId).then((res) => {
        if (res.code == 200) {
          this.remarks = res.data;
          if (res.data.length) {
            this.$nextTick(() => {
              document.getElementById("mark").scrollTop =
                document.getElementById("mark").scrollHeight;
            });
          }
        }
      });
    },
    /* 更新列表页的数据 */
    updateListData() {
      /* 通过localStorage来实现浏览器不同窗口之间的通信 */
      let num = Math.floor(Math.random() * 1000) + 1; //产生随机数，保证每次的值都不一样
      localStorage.setItem("update", num); //设置localStorage里面的值，保证每次都会触发storage事件
    },
  },
};
</script>
<style lang="less" scoped>
.remarksDialog {
  /deep/ .el-dialog {
    position: fixed;
    right: 0;
  }
}
.block {
  .top {
    height: 430px;
    max-height: 430px;
    overflow-y: auto;
    padding-top: 15px;
    .item {
      padding-left: 30px;
      .info {
        color: #000;
        .img {
          position: relative;
          right: 125px;
          bottom: 10px;
          background: #d5e4fd;
        }
        .name,
        .time {
          position: relative;
          bottom: 23px;
          right: 125px;
          padding: 10px;
        }
        .time {
          color: #7f7f7f;
        }
      }
      .content {
        padding-left: 17px;
        text-align: left;
        .checkResults {
          color: #f42c2c;
        }
      }
    }
  }
  .check {
    border-top: 1px solid #d7d7d7;
    padding: 20px 2px;
    text-align: left;
    /deep/ .red-text .el-radio__label {
      color: #f42c2c;
    }
  }
  .bottom {
    .btn {
      position: relative;
      width: 63px;
      height: 26px;
      padding: 6px 10px;
      left: 204px;
      top: 8px;
    }
  }
}
</style>